<template>
  <div>
    <m-menu :router="true" :data="menuData"></m-menu>
    <m-infinite-menu
      :data="menuData2"
      default-active="/"
      :router="true"
      active-text-color="#f00"
    ></m-infinite-menu>
  </div>
</template>

<script setup lang="ts">
let menuData = [
  {
    name: "首页",
    index: "/",
    icon: "home",
  },
  {
    name: "选择图标",
    index: "/choose-icon",
    icon: "lollipop",
  },
  {
    name: "选择区域",
    index: "/choose-area",
    icon: "position",
  },
  {
    name: "趋势标记",
    index: "/trend",
    icon: "sort",
  },
  {
    name: "通知菜单",
    index: "/notification",
    icon: "clock",
  },
  {
    name: "菜单menu",
    index: "/menu",
    icon: "menu",
  },
];
let menuData2 = [
  {
    name: "首页",
    index: "/",
    icon: "Edit",
  },

  {
    name: "趋势标记",
    index: "/trend",
    icon: "Sort",
  },
  {
    name: "通知菜单",
    index: "/notification",
    icon: "Clock",
  },
  {
    name: "菜单menu",
    index: "/menu",
    icon: "M  enu",
    children: [
      {
        name: "submenu1",
        index: "/submenu1",
        icon: "s-home",
        children: [
          {
            name: "1-1",
            index: "1-1",
            icon: "s-home",
            children: [
              {
                name: "1-1-1",
                index: "1-1-1",
                icon: "s-home",
              },
            ],
          },
        ],
      },
    ],
  },
];
</script>

<style scoped></style>
